import React from 'react';
import { Row, Col, Button, Steps, message } from 'antd';
import classNames from 'classnames';
import moment from 'moment';
import { history } from 'umi'

import { isSuccess } from '@/utils/request';
import { salaryRecheck } from '@/services/salaryManage/salaryCalculate';
import styles from '@/pages/SalaryManage/components/CheckSteps/index.less';

import EmployeeNoView from '@/pages/SalaryManage/components/EmployeeNoView';

const { oneClickReminder } = salaryRecheck;

const { Step } = Steps;

// 格式时间为YYYY-MM-DD hh:mm:ss
const formatTime = time => (time ? moment(time).format('YYYY-MM-DD HH:mm:ss') : null);

// 根据是否有值显示列
const colorCol = colValue => <span style={{ color: colValue ? '#F2637B' : '' }}>{colValue}</span>;

const twoStateStep = status => {
    switch (status) {
        case 1:
            return 'finish';

        case 2:
            return 'wait';

        case 3:
        case 4:
            return 'error';

        default:
            return 'wait';
    }
};

const threeStateStep = status => {
    switch (status) {
        case 1:
            return 'wait';

        case 2:
            return 'process';

        case 3:
            return 'finish';

        default:
            return 'wait';
    }
};

const SonStep = ({ salaryOverviewGrantNodeVOList }) =>
    salaryOverviewGrantNodeVOList && salaryOverviewGrantNodeVOList.length ? (
        <div className="sonStep">
            <Steps className={classNames(styles.CheckSteps, styles.internal)} current={null}>
                {salaryOverviewGrantNodeVOList.map(item => (
                    <Step key={item.subType} title={item.subName} status={threeStateStep(item.status)} />
                ))}
            </Steps>
        </div>
    ) : null;

export const StepsEnum = {
    1: {
        code: 'GENERATE',
        name: '薪资生成',
        status: status => twoStateStep(status),
        tips(originStep) {
            return (
                <React.Fragment>
                    <Row>
                        <Col span={12} className="pTip pTipHeader">
                            生成成功
                        </Col>
                        <Col span={12} className="pTip pTipHeader">
                            生成失败
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12} className="pTip pTipContent">
                            {originStep.total - originStep.failed}
                        </Col>
                        <Col span={12} className="pTip pTipContent">
                            {colorCol(originStep.failed)}
                        </Col>
                    </Row>
                </React.Fragment>
            );
        }
    },
    2: {
        code: 'ITEM_CHECK',
        name: '细项复核',
        status: status => threeStateStep(status),
        tips(originStep) {
            return (
                <React.Fragment>
                    <Row>
                        <Col span={12} className="pTip pTipHeader">
                            全体员工
                        </Col>
                        <Col span={12} className="pTip pTipHeader">
                            已复核
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12} className="pTip pTipContent">
                            {originStep.total}
                        </Col>
                        <Col span={12} className="pTip pTipContent">
                            {colorCol(originStep.reviewed)}
                        </Col>
                    </Row>
                </React.Fragment>
            );
        }
    },
    3: {
        code: 'HR_CHECK',
        name: 'HR复核',
        status: status => threeStateStep(status),
        tips(originStep) {
            return (
                <React.Fragment>
                    <SonStep {...originStep} />
                    <div className="stepContent">
                        <Row>
                            <Col span={12} className="pTip pTipHeader">
                                全体员工
                            </Col>
                            <Col span={12} className="pTip pTipHeader">
                                未复核
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12} className="pTip pTipContent">
                                {originStep.total}
                            </Col>
                            <Col span={12} className="pTip pTipContent">
                                {colorCol(originStep.unReviewed)}
                            </Col>
                        </Row>
                    </div>
                </React.Fragment>
            );
        }
    },
    4: {
        code: 'FINANCE_CHECK',
        name: '财务复核',
        status: status => threeStateStep(status),
        tips(originStep) {
            return (
                <React.Fragment>
                    <SonStep {...originStep} />
                    <div className="stepContent">
                        <Row>
                            <Col span={12} className="pTip pTipHeader">
                                全体员工
                            </Col>
                            <Col span={12} className="pTip pTipHeader">
                                未复核
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12} className="pTip pTipContent">
                                {originStep.total}
                            </Col>
                            <Col span={12} className="pTip pTipContent">
                                {colorCol(originStep.unReviewed)}
                            </Col>
                        </Row>
                    </div>
                </React.Fragment>
            );
        }
    },
    5: {
        code: 'STAFF_CONFIRM',
        name: '通知员工',
        status: status => threeStateStep(status),
        tips(originStep, year, month, showButton, organizationCode, updateEmployeeFn) {
            const gotoDetail = () => {
                const path = '/finance/salary/confirm/salaryfeedback';
                history.push({
                    pathname: path,
                    query: {
                        period: `${year}-${month}`,
                        organizationCode
                    },
                    state: { tabRoute: true, tabRefresh: true, active: 1 }
                });
            };

            // 一键提醒
            const oneClickFn = () => {
                oneClickReminder({
                    year,
                    month,
                    organizationCode
                }).then(res => {
                    if (isSuccess(res)) {
                        message.success('已发IM消息提示未确认的员工！');
                    } else {
                        message.error(`请求失败：${res.msg}`);
                    }
                });
            };
            return (
                <React.Fragment>
                    <Row style={{ minWidth: 720 }} className="employeeView">
                        <Col span={3} className="pTip pTipHeader">
                            全体员工
                        </Col>
                        <Col span={3} className="pTip pTipHeader">
                            离职员工
                        </Col>
                        <Col span={3} className="pTip pTipHeader">
                            反馈数量
                        </Col>
                        <Col span={3} className="pTip pTipHeader">
                            已确认员工
                        </Col>
                        <Col span={4} className="pTip pTipHeader">
                            未确认员工
                        </Col>
                        <Col span={4} className="pTip pTipHeader">
                            已查看员工
                        </Col>
                        <Col span={4} className="pTip pTipHeader">
                            未查看员工
                        </Col>
                    </Row>
                    <Row>
                        <Col span={3} className="pTip pTipContent">
                            {originStep.total}
                        </Col>
                        <Col span={3} className="pTip pTipContent">
                            {originStep.leaveTotal}
                        </Col>
                        <Col span={3} className="pTip pTipContent">
                            <div>
                                <span>{originStep.feedback}</span>
                            </div>
                            <div>
                                {showButton ? (
                                    <Button type="primary" ghost size="small" onClick={gotoDetail}>
                                        查看详情
                                    </Button>
                                ) : null}
                            </div>
                        </Col>
                        <Col span={3} className="pTip pTipContent">
                            {originStep.confirmed}
                        </Col>
                        <Col span={4} className="pTip pTipContent">
                            <div>
                                <span>{originStep.unconfirmed}</span>
                            </div>
                            <div>
                                {!showButton || originStep.oneClickReminderShowFlag === 0 ? null : (
                                    <Button type="primary" size="small" ghost onClick={oneClickFn}>
                                        一键提醒
                                    </Button>
                                )}
                            </div>
                        </Col>
                        <Col span={4} className="pTip pTipContent">
                            {originStep.viewed}
                        </Col>
                        <Col span={4} className="pTip pTipContent">
                            <div>
                                <span>{originStep.unViewed}</span>
                            </div>
                            {showButton && originStep?.unViewed > 0 ? (
                                <div>
                                    <EmployeeNoView
                                        updateStep={updateEmployeeFn}
                                        organizationCode={organizationCode}
                                        year={year}
                                        month={month}
                                    />
                                </div>
                            ) : null}
                        </Col>
                    </Row>
                </React.Fragment>
            );
        }
    },
    6: {
        code: 'APPROVE',
        name: '薪资审批',
        status: status => threeStateStep(status),
        tips(originStep) {
            return (
                <React.Fragment>
                    <Row>
                        <Col span={originStep.approveSubmitTime ? 12 : 24} className="pTip pTipHeader">
                            提交审批时间
                        </Col>
                        {originStep.approveSubmitTime ? (
                            <Col span={12} className="pTip pTipHeader">
                                完成审批时间
                            </Col>
                        ) : null}
                    </Row>
                    <Row>
                        <Col span={originStep.approveSubmitTime ? 12 : 24} className="pTip pTipContent">
                            <span>{formatTime(originStep.approveSubmitTime) || '尚未提交审批'}</span>
                        </Col>
                        {originStep.approveSubmitTime ? (
                            <Col span={12} className="pTip pTipContent">
                                <span>{formatTime(originStep.approveCompleteTime) || '尚未完成审批'}</span>
                            </Col>
                        ) : null}
                    </Row>
                </React.Fragment>
            );
        }
    },
    7: {
        code: 'GRANT_APPLY',
        name: '发放申请',
        status: status => threeStateStep(status),
        tips(originStep) {
            return (
                <React.Fragment>
                    <Row>
                        <Col span={24} className="pTip pTipHeader">
                            提交申请时间
                        </Col>
                    </Row>
                    <Row>
                        <Col span={24} className="pTip pTipContent">
                            <span>{formatTime(originStep.applySubmitTime)}</span>
                        </Col>
                    </Row>
                </React.Fragment>
            );
        }
    },
    8: {
        code: 'BANK_PAY',
        name: '执行付款',
        status: status => threeStateStep(status),
        tips(originStep) {
            return (
                <React.Fragment>
                    <Row>
                        <Col span={24} className="pTip pTipHeader">
                            完成付款时间
                        </Col>
                    </Row>
                    <Row>
                        <Col span={24} className="pTip pTipContent">
                            <span>{formatTime(originStep.payTime)}</span>
                        </Col>
                    </Row>
                </React.Fragment>
            );
        }
    }
};

export const convert2StepDisplayInfo = (stepList, year, month, showButton, organizationCode, updateStepFn) => {
    const updateStep = data => {
        const list = stepList?.map(item => (item.type === 5 ? { ...item, ...data } : item));
        updateStepFn(list);
    };
    return stepList.map(step => {
        const stepModel = StepsEnum[step.type];

        return {
            type: step.type,
            title: step.name,
            status: stepModel.status(step.status),
            originalInfo: { ...step },
            tips: stepModel.tips(step, year, month, showButton, organizationCode, updateStep)
        };
    });
};

const CHECK_STATUS = {
    NOT_CHECK: {
        code: 1,
        text: '未复核'
    },
    CHECKED: {
        code: 2,
        text: '已复核'
    },
    REJECT: {
        code: 3,
        text: '已驳回'
    },
    FINAL_REJECT: {
        code: 5,
        text: '已驳回'
    }
};

export { CHECK_STATUS };
